import React, { Component } from "react";
import axios from "axios";

class ArticleDetail extends Component {
  constructor(props) {
    super(props);
    this.state = {
      article: {},
    };
  }

  getArticle = async (id) => {
    const res = await axios.get(
      `https://mjuruankai.com/api/web/article_by_id/?id=${id}`
    );
    console.log(res.data.list[0].fields);

    this.setState({
      article: res.data.list[0].fields,
    });
  };
  componentDidMount() {
    console.log(this.props.id);
    this.getArticle(this.props.id);
  }
  render() {
    let articleWithPic = ''
    if (this.state.article.content !== undefined) {
        console.log(this.state.article.content);
        
      articleWithPic = this.state.article.content.replace(
        /\/images/g,
        "https://mjuruankai.com/images/"
      );
    }
    return (
      <section className="company-activities-det">
        <div className="activities-det">
          {this.state.article !== "" ? (
            <div className="activity-det">
              <div className="act-image-wrapper-det">
                <img
                  src={
                    "https://mjuruankai.com" + this.state.article.cover_image
                  }
                  alt=""
                />
              </div>
              <h2 className="act-title-det">{this.state.article.title}</h2>
              <div className="meta-det">
                <p className="data-published-det">
                  <i className="far fa-calendar">
                    {new Date(this.state.article.date_created).getFullYear() +
                      "-" +
                      (new Date(this.state.article.date_created).getMonth() +
                        1) +
                      "-" +
                      new Date(this.state.article.date_created).getDate()}
                  </i>
                </p>
                <p className="comments-det">
                  <i className="far fa-comments"></i>
                  {this.state.article.like}条评论
                </p>
              </div>
              <article
                dangerouslySetInnerHTML={{ __html: articleWithPic }}
              ></article>
            </div>
          ) : (
            <div>刷新中</div>
          )}
        </div>
      </section>
    );
  }
}

export default ArticleDetail;
